<template>
	<div style="height: 100%;">
		<el-container>
			<el-main>
				<el-tabs type="border-card">
					<el-tab-pane label="用户列表">
						<el-card>
							<el-form ref="formRef" :model="searchForm" label-width="100px">
								<el-row :gutter="15">
									<el-col :span="8">
										<el-form-item label="用户名称" prop="username">
											<el-input placeholder="请输入登录账号" clearable v-model="searchForm.username" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item label="真实姓名" prop="realName">
											<el-input placeholder="请输入真实姓名" clearable v-model="searchForm.realName" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item label="邮箱" prop="email">
											<el-input placeholder="请输入用户邮箱" clearable v-model="searchForm.email" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item label="手机号码" prop="phone">
											<el-input placeholder="请输入手机号码" clearable v-model="searchForm.phone" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item label="性别" prop="gender">
											<el-select v-model="searchForm.gender" placeholder="请选择用户性别" clearable>
												<el-option v-for="item in dicts.system_global_gender" :key="item.v"
													:label="item.k" :value="item.v" />
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item label="账号状态" prop="enabled">
											<el-select v-model="searchForm.enabled" placeholder="请选择账号状态" clearable>
												<el-option v-for="item in dicts.system_global_status" :key="item.v"
													:label="item.k" :value="item.v" />
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-button type="primary" icon="search" @click="getUserPageData">搜索</el-button>
										<el-button icon="refresh" @click="resetSearchForm">重置</el-button>
									</el-col>
								</el-row>
							</el-form>
						</el-card>
						<el-card style="margin-top:15px;">
							<div class="toolbar" style="margin-bottom: 15px;">
								<el-button type="primary" icon="plus" @click="AOEUser('')">新增</el-button>
							</div>
							<el-table :data="userList" border>
								<el-table-column align="center" type="selection" />
								<el-table-column label="用户姓名" prop="username" align="center" />
								<el-table-column label="真实姓名" prop="realName" align="center" />
								<el-table-column label="用户类型" prop="userType" width="100px">
									<template #default="{ row }">
										<div v-if="row.userType == 0">普通账号</div>
										<div v-if="row.userType == 1">超级管理员</div>
									</template>
								</el-table-column>
								<el-table-column label="手机号码" prop="phone" align="center" />
								<el-table-column label="用户性别" prop="gender" align="center">
									<template #default="{ row }">
										<template v-for="item in dicts.system_global_gender">
											<div v-if="row.gender == item.v">{{ item.k }}</div>
										</template>
									</template>
								</el-table-column>
								<el-table-column label="账号状态" prop="enabled" align="center">
									<template #default="{ row }">
										<template v-for="item in dicts.system_global_status">
											<el-tag v-if="row.enabled == item.v">{{ item.k }}</el-tag>
										</template>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="210">
									<template #default="{ row }">
										<div class="sys-table-main-actions">
											<el-link icon="edit" :underline="false" type="primary"
												@click="AOEUser(row.id)">编辑</el-link>
											<el-link v-auths="'system:user:delete'" icon="delete" :underline="false"
												type="danger" @click="rmUser(row.id)" style="margin:0 15px;">删除</el-link>
											<el-link icon="Refresh" :underline="false" type="success">重置密码</el-link>
										</div>
									</template>
								</el-table-column>
							</el-table>
							<XlxPagination v-model:currentPage="searchForm.current" v-model:pageSize="searchForm.size"
								:total="searchForm.total" @update:currentPage="getUserPageData"
								@update:pageSize="updateSize">
							</XlxPagination>
						</el-card>
					</el-tab-pane>
					<el-tab-pane label="回收站">回收站</el-tab-pane>
				</el-tabs>
			</el-main>
		</el-container>
		<userDialog v-model="dialogVisible" @userSuccess="getUserPageData" :userId="userId">
		</userDialog>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useDicts } from '@renderer/composables/dicts'
import { getUserDeleteApi, getUserPageApi } from '@renderer/api/user';
import { onMounted } from 'vue';
import { Record } from '@renderer/interface/user';
import userDialog from './userDialog.vue'

const searchFormValue = () => ({
	current: 1,
	size: 5,
	total: 0,
	username: '',
	realName: '',
	email: '',
	phone: '',
	gender: '',
	enabled: '',
	unitId: ''
})
let searchForm = reactive(searchFormValue())

// 重置数据
const resetSearchForm = () => {
	Object.assign(searchForm, searchFormValue())
	getUserPageData()
}

/* 用户列表 */
const userList = ref<Record[]>([])
// 获取用户列表数据
const getUserPageData = async () => {
	const { code, data: { records, total } } = await getUserPageApi(searchForm)
	if (code !== '200') return

	userList.value = records
	searchForm.total = total
}
const { dicts } = useDicts(['system_global_status', 'system_global_gender'])
const updateSize = (val: number) => {
	searchForm.current = 1
	searchForm.size = val
	getUserPageData()
}
// 新增/编辑按钮
const AOEUser = (id: string) => {
	userId.value = id
	dialogVisible.value = true
}
// 删除用户
const rmUser = (id) => {
	ElMessageBox.confirm('是否删除角色', {
		type: 'error',
		confirmButtonText: '删除'
	}).then(async () => {
		const { code } = await getUserDeleteApi(id)
		if (code !== '200') return

		getUserPageData()
	})
}

/* dialog 组件 */
const dialogVisible = ref(false)
const userId = ref('')

onMounted(() => {
	getUserPageData()
})
</script>

<style scoped></style>